﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全屏消息提示样式展示</title>

    @include("frontend/bootstrap/common/css")

    <link href="/theme/bootstrap/css/message.css?t={{$version}}" rel="stylesheet">

    <style>
        :root {
            --primary: #0d6efd;
            --secondary: #6c757d;
            --success: #198754;
            --info: #0dcaf0;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #212529;
        }

        body {
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background-color: #f5f7fa;
            padding: 2rem 0;
            color: #333;
        }

        .page-title {
            text-align: center;
            margin-bottom: 2.5rem;
            padding-bottom: 1rem;
            border-bottom: 2px solid #eee;
        }

        .alert-category {
            margin-bottom: 3rem;
        }

        .category-header {
            font-size: 1.4rem;
            margin-bottom: 1.5rem;
            color: var(--dark);
            padding-left: 0.5rem;
            border-left: 4px solid var(--primary);
        }

        .alert-demo {
            margin-bottom: 3rem;
            position: relative;
        }

        .alert-description {
            margin-top: 1rem;
            padding: 1rem;
            font-size: 0.95rem;
            color: #666;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }


    </style>
</head>
<body>
<div class="container">
    <h1 class="page-title">全屏消息提示样式展示</h1>

    <!-- 基础全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">基础全屏提示</h2>

        <div class="alert-demo">
            <p class="alert-description">成功类全屏提示 - 绿色背景，用于展示操作成功的反馈信息，包含图标、标题、详细信息和操作按钮</p>
            @include("frontend/bootstrap/page/message1")
        </div>

        <div class="alert-demo">
            <p class="alert-description">错误类全屏提示 - 红色背景，用于展示操作失败的反馈信息，提供重试和客服支持选项</p>
            @include("frontend/bootstrap/page/message2")
        </div>
    </div>

    <!-- 信息类全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">信息类全屏提示</h2>

        <div class="alert-demo">
            <p class="alert-description">信息类全屏提示 - 青色背景，用于展示系统通知和建议信息</p>
            @include("frontend/bootstrap/page/message3")
        </div>

        <div class="alert-demo">
            <p class="alert-description">警告类全屏提示 - 黄色背景，用于展示需要用户注意的警告信息</p>
            @include("frontend/bootstrap/page/message4")
        </div>
    </div>

    <!-- 特殊样式全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">特殊样式全屏提示</h2>

        <div class="alert-demo">
            <p class="alert-description">渐变背景全屏提示 - 用于重要公告和新功能发布，视觉效果更突出</p>
            @include("frontend/bootstrap/page/message5")
        </div>

        <div class="alert-demo">
            <p class="alert-description">轮廓式全屏提示 - 透明背景搭配边框，用于重要操作的确认提示</p>
            @include("frontend/bootstrap/page/message6")
        </div>

        <div class="alert-demo">
            <p class="alert-description">图案背景全屏提示 - 带轻微图案的背景，用于系统维护等计划性通知</p>
            @include("frontend/bootstrap/page/message7")
        </div>
    </div>

    <!-- 简洁型全屏提示 -->
    <div class="alert-category">
        <h2 class="category-header">简洁型全屏提示</h2>

        <div class="alert-demo">
            <p class="alert-description">加载状态全屏提示 - 简洁的加载状态展示，无操作按钮</p>
            @include("frontend/bootstrap/page/message8")
        </div>

        <div class="alert-demo">
            <p class="alert-description">权限提示全屏提示 - 深色背景，简洁展示权限不足的提示</p>
            @include("frontend/bootstrap/page/message8")
        </div>
    </div>
</div>

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		// 为所有全屏提示添加点击效果

        // 点击 闪动页面
		const alerts = document.querySelectorAll('.fullscreen-alert');
		alerts.forEach(alert => {
			alert.addEventListener('click', function(e) {
				// 避免点击按钮时触发
				if (!e.target.closest('.btn')) {
					this.style.transform = 'scale(0.99)';
					setTimeout(() => {
						this.style.transform = 'scale(1)';
					}, 150);
				}
			});
		});


		// 页面滚动动画
		const animateOnScroll = () => {
			const demos = document.querySelectorAll('.alert-demo');
			demos.forEach((demo, index) => {
				const demoTop = demo.getBoundingClientRect().top;
				const triggerBottom = window.innerHeight * 0.7;

				if (demoTop < triggerBottom) {
					demo.style.opacity = '1';
					demo.style.transform = 'translateY(0)';
				}
			});
		};

		// 初始化样式
		const demos = document.querySelectorAll('.alert-demo');
		demos.forEach((demo, index) => {
			demo.style.opacity = '0';
			demo.style.transform = 'translateY(30px)';
			demo.style.transition = `opacity 0.6s ease ${index * 0.15}s, transform 0.6s ease ${index * 0.15}s`;
		});

		// 初始加载和滚动时触发动画
		window.addEventListener('load', animateOnScroll);
		window.addEventListener('scroll', animateOnScroll);
	});
</script>
</body>
</html>
